<template>
  <div class="register-container">
    <div class="title-container">
      <h3 class="title" style="color: #000; font-size: 50px; ">虚拟仿真实训管理系统</h3>
    </div>
    <div class="body-container">
      <div class="left-body">
        <img src="@/assets/img2.png">
      </div>
      <el-form
        ref="registerForm"
        :rules="rules"
        :model="registerForm"
        label-width="80px"
        class="register-form"
      >
        <h3 style="text-align: center;">用户注册</h3>
        <el-form-item label="账号" prop="username">
          <el-input v-model="registerForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordConfirm">
          <el-input
            v-model="registerForm.passwordConfirm"
            type="password"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="registerForm.name" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="registerForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" />
        </el-form-item>
        <el-form-item
          label="用户类型"
          prop="userType"
          style="text-align: left"
        >
          <el-select v-model="registerForm.userType">
            <el-option
              v-for="item in userTypeOption.codeName"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工号学号" prop="number">
          <el-input v-model="registerForm.number" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="back-but"
            width="200px"
            @click="$router.push('/login')"
          >返回</el-button>
          <el-button
            type="primary"
            class="register-but"
            width="200px"
            @click="register('registerForm')"
          >注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { userRegister, isUserExist, getUserType } from '@/api/user'

export default {
  data() {
    // 验证密码
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.passwordConfirm !== '') {
          this.$refs.registerForm.validateField('passwordConfirm')
        }
        callback()
      }
    }
    var validatePassConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validatePhoneNumber = (rule, value, callback) => {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      var flag = reg.test(value)
      if (!flag) {
        callback(new Error('电话号码格式不正确，请重新输入'))
      } else {
        callback()
      }
    }
    var validateEmail = (rule, value, callback) => {
      const reg =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      var flag = reg.test(value)
      if (!flag) {
        callback(new Error('邮箱格式不正确，请重新输入'))
      } else {
        callback()
      }
    }
    /**
     * 校验用户名是否已经被使用了
     */
    var checkAccout = (rule, value, callback) => {
      isUserExist(value)
        .then((res) => {
          if (res.code === 200) {
            callback()
          }
        })
        .catch(() => {
          callback()
        })
    }
    return {
      userTypeOption: [
        {
          codeValue: '',
          codeName: '-请选择用户类型-'
        }
      ],
      // 表单参数
      registerForm: {
        username: '',
        password: '',
        passwordConfirm: '',
        name: '',
        phone: '',
        email: '',
        userType: '',
        number: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入登录账号',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 12,
            message: '长度为3-12之间',
            trigger: 'blur'
          },
          {
            validator: checkAccout,
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 12,
            message: '长度为3-12之间',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        passwordConfirm: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            validator: validatePassConfirm,
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          {
            validator: validatePhoneNumber,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: validateEmail,
            trigger: 'blur'
          }
        ],
        userType: [
          {
            required: true,
            message: '请选择用户类型',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.loadUserType()
  },
  methods: {
    loadUserType() {
      getUserType('userType').then((res) => {
        if (res.code === 200) {
          this.userTypeOption = res.data
        }
      })
    },
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            username: this.registerForm.username,
            password: this.registerForm.password,
            name: this.registerForm.name,
            phone: this.registerForm.phone,
            email: this.registerForm.email,
            type: this.registerForm.userType,
            number: this.registerForm.number
          }
          userRegister(params)
            .then((res) => {
              if (res.code === 200) {
                this.$alert('注册成功', {
                  confirmButtonText: '确定',
                  callback: () => {
                    this.$router.push('/login')
                  }
                })
              } else {
                this.$message.error(res.message)
              }
            })
            .catch(() => {})
        } else {
          this.$message('请按照提示正确输入数据')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-container{
  height: 100%;
  width: 100%;
  .title-container{
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .body-container{
    display: flex;
    justify-content: space-around;
    .left-body>img{
      width: 500px;
      height:auto;
      transform: translate(0,50%);
    }
    .register-form{
    width: 600px;
    height: auto;
    padding:40px;
    border-radius: 20px;
    background-color: #f3f3f3;
    }
  }
}
.el-button--primary.is-active,
.el-button--primary:active {
  background: #b4003c;
  border-color: #b4003c;
  color: #fff;
}

.el-button--primary:focus,
.el-button--primary:hover {
  background: #d90048;
  border-color: #d90048;
  color: #fff;
}

.el-button--primary {
  color: #FFF;
  background-color: #ff1d68;
  border-color: #ff1d68;
}

</style>
